<template>
  <div class="main-container">
    <div style="margin:10px 0 0 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>报表统计</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>合格率统计</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>
    <div>
      <el-form inline>
        <el-form-item label="请选择统计年份" label-width="120px">
          <el-date-picker v-model="value" type="year" placeholder="请选择统计时段"> </el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row>
        <el-col :span="12">
          <div ref="chart1" style="width: 100%; height: 300px;"></div>
        </el-col>
        <el-col :span="12">
          <div ref="chart2" style="width: 100%; height: 300px;"></div>
        </el-col>
      </el-row>
      <div class="mt50"></div>
      <el-row>
        <el-col :span="12">
          <div ref="chart3" style="width: 100%; height: 300px;"></div>
        </el-col>
        <el-col :span="12">
          <div ref="chart4" style="width: 100%; height: 300px;"></div>
        </el-col>
      </el-row>
    </div>

    <div>
      <div class="split-div">厂内交检加工件合格率统计</div>
      <el-table :data="tableData1" stripe border>
        <el-table-column prop="item" label="项/月度" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="january" label="1月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="february" label="2月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="march" label="3月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="april" label="4月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="may" label="5月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="june" label="6月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="july" label="7月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="august" label="8月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="september" label="9月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="october" label="10月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="november" label="11月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="december" label="12月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="total" label="合计" align="center" ming-width="80"></el-table-column>
      </el-table>

      <div class="split-div">外购/外协检验合格率统计</div>
      <el-table :data="tableData2" stripe border>
        <el-table-column prop="item" label="项/月度" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="january" label="1月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="february" label="2月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="march" label="3月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="april" label="4月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="may" label="5月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="june" label="6月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="july" label="7月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="august" label="8月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="september" label="9月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="october" label="10月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="november" label="11月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="december" label="12月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="total" label="合计" align="center" ming-width="80"></el-table-column>
      </el-table>

      <div class="split-div">交付后合格率统计</div>
      <el-table :data="tableData3" stripe border>
        <el-table-column prop="item" label="项/月度" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="january" label="1月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="february" label="2月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="march" label="3月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="april" label="4月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="may" label="5月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="june" label="6月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="july" label="7月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="august" label="8月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="september" label="9月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="october" label="10月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="november" label="11月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="december" label="12月" align="center" ming-width="80"></el-table-column>
        <el-table-column prop="total" label="合计" align="center" ming-width="80"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import echarts from 'echarts'

@Component({
  components: {}
})
export default class EquipmentList extends Vue {
  mounted() {
    this.initChart1('chart1')
    this.initChart2('chart2')
    this.initChart3('chart3')
    this.initChart4('chart4')
  }

  initChart1(refName) {
    const chartDom = this.$refs[refName]
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        x: 'center',
        text: '年度各项合格率统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: ['厂内交检', '外购外协', '交付合格']
      },
      series: [
        { name: '厂内交检', data: [98.37, 99.42, 99.91, 98.64, 99.55, 99.17, 96.67, 99.15, 98.95, 99.15, 98.1, 99.33], type: 'line' },
        { name: '外购外协', data: [97.87, 95.76, 90.51, 97.77, 99.12, 94.52, 99.9, 99.84, 94.21, 94.09, 98.78, 98.02], type: 'line' },
        { name: '交付合格', data: [97.19, 99.8, 97.47, 100.0, 99.74, 99.11, 98.8, 99.27, 99.85, 100.0, 99.71, 100.0], type: 'line' }
      ]
    }
    option && myChart.setOption(option)
  }
  initChart2(refName) {
    const chartDom = this.$refs[refName]
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        x: 'center',
        text: '厂内交检加工件合格率'
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: ['工序数量', '合格数量', '合格率']
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: [
        { name: '数量', type: 'value', min: 0, max: 2500, interval: 500 },
        { name: '合格率', type: 'value', min: 80, max: 100, interval: 4 }
      ],
      series: [
        {
          name: '工序数量',
          label: {
            show: true,
            position: 'top'
          },
          data: [1167, 1551, 1120, 1396, 894, 1818, 300, 235, 669, 355, 525, 601],
          type: 'bar'
        },
        {
          name: '合格数量',
          label: {
            show: true,
            position: 'top'
          },
          data: [1148, 1542, 1119, 1377, 890, 1803, 290, 233, 662, 352, 515, 597],
          type: 'bar'
        },
        { name: '合格率', yAxisIndex: 1, data: [98.37, 99.42, 99.91, 98.64, 99.55, 99.17, 96.67, 99.15, 98.95, 99.15, 98.1, 99.33], type: 'line' }
      ]
    }
    option && myChart.setOption(option)
  }
  initChart3(refName) {
    const chartDom = this.$refs[refName]
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        x: 'center',
        text: '外购/外协检验合格率统计'
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: ['到货数量', '合格数量', '合格率']
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: [
        { name: '数量', type: 'value', min: 0, max: 2500, interval: 500 },
        { name: '合格率', type: 'value', min: 80, max: 100, interval: 4 }
      ],
      series: [
        {
          name: '到货数量',
          label: {
            show: true,
            position: 'top'
          },
          data: [1125, 354, 653, 1479, 1700, 1149, 965, 641, 501, 237, 576, 506],
          type: 'bar'
        },
        {
          name: '合格数量',
          label: {
            show: true,
            position: 'top'
          },
          data: [1101, 339, 591, 1446, 1685, 1086, 964, 640, 472, 223, 569, 496],
          type: 'bar'
        },
        {
          name: '合格率',
          label: {
            show: true,
            position: 'top'
          },
          yAxisIndex: 1,
          data: [97.87, 95.76, 90.51, 97.77, 99.12, 94.52, 99.9, 99.84, 94.21, 94.09, 98.78, 98.02],
          type: 'line'
        }
      ]
    }
    option && myChart.setOption(option)
  }
  initChart4(refName) {
    const chartDom = this.$refs[refName]
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        x: 'center',
        text: '交付后合格率统计'
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: ['发货数量', '合格数量', '合格率']
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: [
        { name: '数量', type: 'value', min: 0, max: 2500, interval: 500 },
        { name: '合格率', type: 'value', min: 90, max: 100, interval: 2 }
      ],
      series: [
        {
          name: '发货数量',
          data: [712, 496, 79, 996, 1948, 787, 250, 411, 686, 5, 682, 323],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '合格数量',
          data: [692, 495, 77, 996, 1943, 780, 247, 408, 685, 5, 680, 323],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '合格率',
          yAxisIndex: 1,
          data: [97.19, 99.8, 97.47, 100.0, 99.74, 99.11, 98.8, 99.27, 99.85, 100.0, 99.71, 100.0],
          type: 'line',
          label: {
            show: true,
            position: 'top'
          }
        }
      ]
    }
    option && myChart.setOption(option)
  }
  value = ''
  tableData1: any[] = [
    {
      item: '加工工序数量',
      january: 1167,
      february: 1551,
      march: 1120,
      april: 1396,
      may: 894,
      june: 1818,
      july: 300,
      august: 235,
      september: 669,
      october: 355,
      november: 525,
      december: 601,
      total: 10631
    },
    {
      item: '合格数量',
      january: 1148,
      february: 1542,
      march: 1119,
      april: 1377,
      may: 890,
      june: 1803,
      july: 290,
      august: 233,
      september: 662,
      october: 352,
      november: 515,
      december: 597,
      total: 10528
    },
    {
      item: '合格率',
      january: '98.37%',
      february: '99.42%',
      march: '99.91%',
      april: '98.64%',
      may: '99.55%',
      june: '99.17%',
      july: '96.67%',
      august: '99.15%',
      september: '98.95%',
      october: '99.15%',
      november: '98.10%',
      december: '99.33%',
      total: '99.03%'
    }
  ]
  tableData2: any[] = [
    {
      item: '到货数量',
      january: 1125,
      february: 354,
      march: 653,
      april: 1479,
      may: 1700,
      june: 1149,
      july: 965,
      august: 641,
      september: 501,
      october: 237,
      november: 576,
      december: 506,
      total: 9886
    },
    {
      item: '合格数量',
      january: 1101,
      february: 339,
      march: 591,
      april: 1446,
      may: 1685,
      june: 1086,
      july: 964,
      august: 640,
      september: 472,
      october: 223,
      november: 569,
      december: 496,
      total: 9612
    },
    {
      item: '合格率',
      january: '97.87%',
      february: '95.76%',
      march: '90.51%',
      april: '97.77%',
      may: '99.12%',
      june: '94.52%',
      july: '99.90%',
      august: '99.84%',
      september: '94.21%',
      october: '94.09%',
      november: '98.78%',
      december: '98.02%',
      total: '97.23%'
    }
  ]
  tableData3: any[] = [
    {
      item: '发货数量',
      january: 712,
      february: 496,
      march: 79,
      april: 996,
      may: 1948,
      june: 787,
      july: 250,
      august: 411,
      september: 686,
      october: 5,
      november: 682,
      december: 323,
      total: 7375
    },
    {
      item: '合格数量',
      january: 692,
      february: 495,
      march: 77,
      april: 996,
      may: 1943,
      june: 780,
      july: 247,
      august: 408,
      september: 685,
      october: 5,
      november: 680,
      december: 323,
      total: 7331
    },
    {
      item: '合格率',
      january: '97.19%',
      february: '99.80%',
      march: '97.47%',
      april: '100.00%',
      may: '99.74%',
      june: '99.11%',
      july: '98.80%',
      august: '99.27%',
      september: '99.85%',
      october: '100.00%',
      november: '99.71%',
      december: '100.00%',
      total: '99.40%'
    }
  ]
}
</script>

<style lang="scss" scoped>
.split-div {
  background: linear-gradient(to right, #28dd464d, white);
  color: #000000;
  margin-top: 10px;
  padding: 5px 20px;
  font-size: 14px;
}
</style>
